<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<script type="text/javascript" >
//simple javascript-function for only hiding the Add-Dialog of no validation-errors occured
function handleAddClose(xhr, status, args) 
{
   if (!args.validationFailed) {
      adddialog.hide();
   }
}
//simple javascript-function for only hiding the Edit-Dialog of no validation-errors occured
function handleEditClose(xhr, status, args) 
{
   if (!args.validationFailed) {
      editdialog.hide();
   }
}
</script>
<title>BirthdayReminder | #{msg.contactsTitle}</title>
<link href="css/mystyles.css" rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
<f:view locale="#{languageBean.activeLocale}">
<div align="center">
<h:form id="navform">
<p><h:commandLink id="start" value="#{msg.NavStart}" action="#{contactsBean.doNavigate}" styleClass="navButton"><f:param name="nav" value="start"/></h:commandLink>  
<h:commandLink id="contacts" value="#{msg.NavContacts}" action="#{contactsBean.doNavigate}" styleClass="navButtonActive"><f:param name="nav" value="contacts"/></h:commandLink>  
<h:commandLink id="calendar" value="#{msg.NavCalendar}" action="#{contactsBean.doNavigate}" styleClass="navButton"><f:param name="nav" value="calendar"/></h:commandLink>  
<h:outputText value="#{msg.LoggedInAs} "/><b><h:outputText value="#{usernameUtil.username} "/></b> |
<h:commandLink value="#{msg.NavLogout}" action="#{logoutBean.doLogout}"/></p>
</h:form>
<h1>#{msg.contactsHeadLine}</h1>
<p:messages id="messages" showDetail="true" globalOnly="true" />
<h:form id ="contactsform">
<p:dataTable id="contactstable" var="contact" value="#{contactsBean.listOfContacts()}" emptyMessage="---" 
			  paginator="true" rows="10"  
              paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
              rowsPerPageTemplate="5,10,15">
<p:column style="width:20px">  
<p:rowToggler />
</p:column>
<p:column sortBy="#{contact.name}">
<f:facet name="header">#{msg.contactsTableName}</f:facet>
<h:outputText value="#{contact.name}" />
</p:column>
<p:column sortBy="#{contact.age}">
<f:facet name="header">#{msg.contactsTableDateofBirth}</f:facet>
<h:outputText value="#{contact.dob lt 10 ? '0' : ''}#{contact.dob}.#{contact.mob lt 10 ? '0' : ''}#{contact.mob}.#{contact.yob le 0 ? '' : contact.yob}" escape="false"/>
</p:column>
<p:column sortBy="#{contact.age}">
<f:facet name="header">#{msg.contactsTableAge}</f:facet>
<h:outputText value="#{contact.yob le 0 ? '?' : contact.age}" escape="true"/>
</p:column>
<p:column sortBy="">
<f:facet name="header">#{msg.contactsTableAction}</f:facet>
<p:commandLink update=":editcontact" onclick="editdialog.show();" action="#{contactsBean.toEdit(contact)}"><img src="pics/basic_edit.png"/></p:commandLink>
<p:commandLink update=":managepresents" onclick="presentsdialog.show();" action="#{contactsBean.managePresents(contact)}"><img src="pics/basic_present.png"/></p:commandLink>
<p:commandLink onclick="confirmation.show()" action="#{contactsBean.toDelete(contact)}"><img src="pics/basic_del.png"/></p:commandLink>
<f:facet name="footer"><p:commandLink update=":addcontact" onclick="adddialog.show();" action="#{contactsBean.initAdd}"><img src="pics/basic_add.png"/></p:commandLink></f:facet> 
</p:column>
<p:rowExpansion>
			
            <h:panelGrid id="display" columns="2" cellpadding="4"  
                        style="width:300px;"
                        styleClass="" 
                        columnClasses="label, value">  
                <f:facet name="header">  
                     <h:outputText value="#{msg.contactsDetailsHeader}" style="font-weight:bold" />  
                </f:facet>  
                <h:outputText value="#{msg.contactsAddEmail}" />  
                <h:outputText value="#{contact.email}" />  
                <h:outputText value="#{msg.contactsAddAddress}" />  
                <h:outputText value="#{contact.address}" />  
                <h:outputText value="#{msg.contactsAddZip}" />  
                <h:outputText value="#{contact.zip}"/>  
                <h:outputText value="#{msg.contactsAddLocation}" />  
                <h:outputText value="#{contact.location}"/>  
            </h:panelGrid>
            <!-- 
            <h:panelGrid id="displaypresents" columns="1" cellpadding="4" border="0" 
                        style="width:300px;"
                        styleClass="" 
                        columnClasses="label, value">  
                <f:facet name="header">  
                     <h:outputText value="Presents made" style="font-weight:bold" />  
                </f:facet>  
            <p:dataList value="#{contact.presents}" var="present"   
        		paginator="false" rows="5" effectSpeed="fast">    
        	<p:column>
        		<h:outputText value="#{present.description}" style="margin-left:10px" />
        	</p:column>    
   			</p:dataList>
   			</h:panelGrid>
   			 -->
</p:rowExpansion>  
</p:dataTable>
<p:confirmDialog message="#{msg.contactsConfirmDialogMessage}"  
                showEffect="shake" hideEffect="explode" modal="true"  
                header="#{msg.contactsConfirmDialogHeader}" severity="alert" widgetVar="confirmation" >  
        <p:commandButton value="#{msg.contactsConfirmDialogYesButton}" update="contactstable :messages" oncomplete="confirmation.hide()"  
                    action="#{contactsBean.deleteContact()}" />  
        <p:commandButton value="#{msg.contactsConfirmDialogNoButton}" onclick="confirmation.hide()" type="button" />   
</p:confirmDialog>
</h:form> 
<p:dialog header="#{msg.contactsEditHeader}" widgetVar="editdialog" modal="true" showEffect="slide" hideEffect="explode" height="500" width="950">  
<h:form id="editcontact">
	<h:outputText id="headline" value="#{msg.contactsAddHeadline}" style="font-weight:bold"/>
	<h:panelGrid columns="3" cellpadding="3" id="addgrid" width="930" cellspacing="1" columnClasses="dialogLabel, dialogData, dialogError">
	<h:outputLabel for="name" value="#{msg.contactsAddName}" />  
    <p:inputText value="#{contactsBean.name}" id="name" required="true" requiredMessage="#{msg.contactsAddNameError}" label="name" />
    <h:message for="name" styleClass="error"/>
    <h:outputLabel for="yob" value="#{msg.contactsAddYob}" />  
    <p:inputMask value="#{contactsBean.yob}" mask="9999" id="yob" label="yob" >
    <p:ajax update="months days" event="blur" listener="#{contactsBean.refreshDropdownsEdit}" />
    </p:inputMask>
    <h:message for="yob" styleClass="error"/>
    <h:outputLabel for="months" value="#{msg.contactsAddMob}" />
    <h:selectOneMenu id="months" value="#{contactsBean.month}" required="true" requiredMessage="#{msg.contactsAddMobError}">  
            <f:selectItem itemLabel="- - -" itemValue="" />  
            <f:selectItems value="#{contactsBean.months}" />  
            <p:ajax update="days" listener="#{contactsBean.handleMonthChange}" />  
    </h:selectOneMenu>
    <h:message for="months" styleClass="error"/>  
    <h:outputLabel for="days" value="#{msg.contactsAddDob}" />    
    <h:selectOneMenu id="days" value="#{contactsBean.day}" required="true" requiredMessage="#{msg.contactsAddDobError}">  
            <f:selectItem itemValue="" itemLabel="- - -" />  
            <f:selectItems value="#{contactsBean.days}" />  
    </h:selectOneMenu>
    <h:message for="days" styleClass="error"/>   
    <h:outputLabel for="email" value="#{msg.contactsAddEmail}" />  
    <p:inputText value="#{contactsBean.email}" id="email" label="email" validatorMessage="#{msg.contactsAddEmailPatternError}">
    <f:validateRegex pattern="^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$" />
    </p:inputText>
    <h:message for="email" styleClass="error"/> 
    <h:outputLabel for="address" value="#{msg.contactsAddAddress}" />  
    <p:inputText value="#{contactsBean.address}" id="address" label="address" />
    <h:message for="address" styleClass="error"/> 
    <h:outputLabel for="zip" value="#{msg.contactsAddZip}" />  
    <p:inputText value="#{contactsBean.zip}" id="zip" label="zip" />
    <h:message for="zip" styleClass="error"/> 
    <h:outputLabel for="location" value="#{msg.contactsAddLocation}" />  
    <p:inputText value="#{contactsBean.location}" id="location" label="location" />
    <h:message for="location" styleClass="error"/> 
	</h:panelGrid>
	<h:panelGrid columns="2" cellpadding="3" cellspacing="1">
	<p:commandButton value="#{msg.contactsAddSave}" update=":contactsform:contactstable @form :messages" process="@form"  
                    action="#{contactsBean.editContact()}" oncomplete="handleEditClose(xhr, status, args);"/>  
    <p:commandButton value="#{msg.contactsAddCancel}" onclick="editdialog.hide()" type="button" />
	</h:panelGrid>
</h:form>  
</p:dialog>
<p:dialog header="#{msg.contactsAddHeader}" widgetVar="adddialog" modal="true" showEffect="slide" hideEffect="explode" height="500" width="950">  
<h:form id="addcontact">
	<h:outputText id="headline" value="#{msg.contactsAddHeadline}" style="font-weight:bold"/>
	<h:panelGrid columns="3" cellpadding="3" id="addgrid" width="930" cellspacing="1" columnClasses="dialogLabel, dialogData, dialogError">
	<h:outputLabel for="name" value="#{msg.contactsAddName}" />  
    <p:inputText value="#{contactsBean.name}" id="name" required="true" requiredMessage="#{msg.contactsAddNameError}" label="name" />
    <h:message for="name" styleClass="error"/>
    <h:outputLabel for="yob" value="#{msg.contactsAddYob}" />  
    <p:inputMask value="#{contactsBean.yob}" mask="9999" id="yob" label="yob" >
    <p:ajax update="months days" event="keyup" listener="#{contactsBean.refreshDropdowns}" />
    </p:inputMask>
    <h:message for="yob" styleClass="error"/>
    <h:outputLabel for="months" value="#{msg.contactsAddMob}" />
    <h:selectOneMenu id="months" value="#{contactsBean.month}" required="true" requiredMessage="#{msg.contactsAddMobError}">  
            <f:selectItem itemLabel="- - -" itemValue="" />  
            <f:selectItems value="#{contactsBean.months}" />  
            <p:ajax update="days" listener="#{contactsBean.handleMonthChange}" />  
    </h:selectOneMenu>
    <h:message for="months" styleClass="error"/>  
    <h:outputLabel for="days" value="#{msg.contactsAddDob}" />    
    <h:selectOneMenu id="days" value="#{contactsBean.day}" required="true" requiredMessage="#{msg.contactsAddDobError}">  
            <f:selectItem itemValue="" itemLabel="- - -" />  
            <f:selectItems value="#{contactsBean.days}" />  
    </h:selectOneMenu>
    <h:message for="days" styleClass="error"/>   
    <h:outputLabel for="email" value="#{msg.contactsAddEmail}" />  
    <p:inputText value="#{contactsBean.email}" id="email" label="email" validatorMessage="#{msg.contactsAddEmailPatternError}">
    <f:validateRegex pattern="^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$" />
    </p:inputText>
    <h:message for="email" styleClass="error"/> 
    <h:outputLabel for="address" value="#{msg.contactsAddAddress}" />  
    <p:inputText value="#{contactsBean.address}" id="address" label="address" />
    <h:message for="address" styleClass="error"/> 
    <h:outputLabel for="zip" value="#{msg.contactsAddZip}" />  
    <p:inputText value="#{contactsBean.zip}" id="zip" label="zip" />
    <h:message for="zip" styleClass="error"/> 
    <h:outputLabel for="location" value="#{msg.contactsAddLocation}" />  
    <p:inputText value="#{contactsBean.location}" id="location" label="location" />
    <h:message for="location" styleClass="error"/> 
	</h:panelGrid>
	<h:panelGrid columns="2" cellpadding="3" cellspacing="1">
	<p:commandButton value="#{msg.contactsAddSave}" update=":contactsform:contactstable @form :messages" process="@form"  
                    action="#{contactsBean.addContact()}" oncomplete="handleAddClose(xhr, status, args);"/>  
    <p:commandButton value="#{msg.contactsAddCancel}" onclick="adddialog.hide()" type="button" />
	</h:panelGrid>
</h:form>  
</p:dialog>
<p:dialog header="#{msg.contactsPresentsHeader}" widgetVar="presentsdialog" modal="true" showEffect="slide" hideEffect="explode" height="520" width="550">  
<h:form id="managepresents">
	<h:outputText id="headline" value="#{msg.contactsPresentsHeadline}" style="font-weight:bold"/>
	<h:panelGrid columns="1" cellpadding="3" id="addgrid" width="500" cellspacing="1">
	<p:dataList value="#{contactsBean.presents}" var="present"  
        paginator="true" rows="5" effectSpeed="fast"  
        paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink}"  
        rowsPerPageTemplate="5,10,15">  
        <p:column>
        	<h:outputText value="#{present.description}" style="margin-left:10px" />
        </p:column>    
        <p:column>
        	<p:commandLink update="@form :messages" action="#{contactsBean.delPresent(present)}">  
            <img src="pics/basic_del_small.png"/>
            </p:commandLink>
        </p:column>
    </p:dataList>
    </h:panelGrid>
    <table width="450">
    <tr>
    <td width="50%">
    <h:outputLabel for="present" value="#{msg.contactsNewPresent}" />
    </td>
    <td width="40%">  
    <p:inputText value="#{contactsBean.presdescription}" id="present" label="present" />
    </td>
    <td style="margin-left:10px" width="10%">
    <p:commandLink update="@form :messages" action="#{contactsBean.addPresent()}"><img src="pics/basic_add_small.png"/></p:commandLink>
    </td>
    </tr>
    </table>
    <br />
	<p:commandButton value="#{msg.contactsPresentOk}" update=":contactsform:contactstable @form" process="@form"  
                    oncomplete="presentsdialog.hide()"/>  
</h:form>  
</p:dialog>
</div>
</f:view>
</h:body>
</html>